<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-25 15:42:29
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-25 18:02:55
 * @FilePath: \nuxt3-music-player\src\components\Login\check.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
const _props = defineProps<{
  code: number;
  qrimgUrl: string;
}>();
</script>

<template>
  <div class="h-full flex flex-col items-center justify-center text-center">
    <div>
      <!-- 标题 -->
      <div v-if="_props.code === 801">
        <h3>扫码登录</h3>
      </div>
      <!-- 二维码 -->
      <div class="relative h-55 w-55">
        <nuxt-img v-if="_props.code !== 802" :src="qrimgUrl" class="h-full w-full" />
        <div v-if="_props.code === 800" class="absolute top-0 z-5 h-55 w-55 bg-gray-800/80">
          <div class="h-full w-full flex flex-col items-center justify-center">
            <div class="f-full w-full">
              <div class="flex-default flex-[0.6]">
                <svg-icon class="h-22 w-22" name="login-error" />
              </div>
              <div class="flex flex-[0.4] flex-col items-center justify-center">
                <h3 class="font-normal text-white">登录过期</h3>
                <button class="button-default mb-2 mr-0 border-black bg-black text-sm text-white">
                  点击刷新
                </button>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="_props.code === 802" class="h-full">
          <div class="flex-default">
            <svg-icon class="h-30 w-30" name="login-success" />
          </div>
          <div class="flex flex-1 flex-col items-center justify-center">
            <h3 class="font-lg">等待授权</h3>
          </div>
        </div>
      </div>
    </div>
    <!-- 提示 -->
    <div v-if="_props.code !== 802">
      <div>
        <h4 class="text-base font-normal">
          使用
          <nuxt-link to="https://music.163.com/#/download" target="_blank" class="text-blue-800">
            网易云音乐App
          </nuxt-link>
          扫码登录
        </h4>
      </div>
      <!-- 其他方式 -->
      <div class="">
        <h5 class="flex-default cursor-pointer text-sm font-normal font-semibold">
          选择其他登录模式
          <svg-icon class="h-5 w-5" name="right" />
        </h5>
      </div>
    </div>
  </div>
</template>
